<template>
  <el-dialog
    draggable
    overflow
    :title="'开卡'"
    v-model="visible"
    :width="1024"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="dialogForm"
      label-width="80px"
      label-position="right"
    >
      <el-row>
        <el-col :span="6" align="客户">
          <el-form-item label="客户" prop="customer_id">
            <el-input v-model="form.customer.code" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工艺">
            <el-input v-model="form.craft_remark" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="透湿指标">
            <el-input v-model="form.soak" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="水压指标">
            <el-input v-model="form.water_pressure" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="终检">
            <el-checkbox
              v-model="form.needEndInspect"
              label=""
              :true-label="1"
              :false-label="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="客供底布">
            <el-checkbox
              v-model="form.customer_material"
              label=""
              :true-label="1"
              :false-label="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="正面" prop="inspection_requirements">
            <el-input v-model="form.inspection_requirements" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="生管要求" prop="packaging_requirements">
            <el-input v-model="form.newremark" />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="贴合间隙" prop="joint_gap">
            <el-input v-model="form.joint_gap" />
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="工艺记录" prop="process_requirements">
            <el-input v-model="form.process_requirements" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="上胶间隙" prop="glue_gap">
            <el-input v-model="form.glue_gap" />
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="备注" prop="remark">
            <template #default>
              <div style="border: 1px solid gray; width: 100%; height: 100%">
                {{ form.remark }}
              </div>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="油温" prop="oil_temperature">
            <el-input v-model="form.oil_temperature" />
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="工艺线路" prop="process_route_id">
            <skAutoChoose
              :asKey="'process_route_id'"
              :assign="form"
              v-model="form.process.name"
              :name="'process_route'"
              :placeholder="'请选择加工线路'"
              :params="getProcessCategory"
              @select="processSelect"
            >
            </skAutoChoose>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="线路内容">
            <el-input v-model="form.process.content"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-form-item label-width="0">
            <el-button @click="browserOpenCard">选择大货</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="胶温" prop="glue_temperature">
            <el-input v-model="form.glue_temperature" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="开卡面布" prop="details">
            <sc-VxeTable
              ref="xGrid1"
              :gridEvts="gridEvents"
              :gridOps="gridOps"
              :data="form.details"
              :tablecode="'market_pro_storage_receive_save'"
            >
            </sc-VxeTable>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="工艺BOM" prop="bom_id">
            <skAutoChoose
              style="width: 100%"
              ref="autoBom"
              :asKey="'bom_id'"
              :assign="form"
              v-model="form.bom.name"
              :name="'bom'"
              :placeholder="'不选时，为新增BOM'"
              :params="getProcessBomCategory"
              @select="bomSelect"
            >
            </skAutoChoose>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="膜/布" prop="material">
            <el-input v-model="search.material"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="棍" prop="pointStick">
            <el-input v-model="search.pointStick"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="胶水" prop="glue">
            <el-input v-model="search.glue"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="BOM明细" prop="raws">
            <sc-VxeTable
              ref="xGrid1"
              :gridEvts="gridEvents"
              :gridOps="{ height: 200 }"
              :data="form.raws"
              :tablecode="'market_pro_process_save'"
            >
            </sc-VxeTable>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
  <skBrowserChoose
    v-model="openChooseDlg"
    :name="'opencard_browser'"
    @close="openChooseDlg = false"
    @select="opencardSelect"
    :params="getopencardParams()"
  >
  </skBrowserChoose>
</template>

<script>
import skDicSelect from "@/components/skDicSelect";
import skAutoChoose from "@/components/skAutoChoose";
import skAutodcomplete from "@/components/skAutoComplete";
import skBrowserChoose from "@/components/skBrowserChoose";
export default {
  emits: ["success", "closed"],
  components: { skDicSelect, skAutoChoose, skAutodcomplete, skBrowserChoose },
  data() {
    return {
      gridEvents: {},
      gridOps: { height: 150 },
      linkmanList: [],
      openChooseDlg: false,
      is_sample: null,
      form: {
        process: {},
        details: [],
        raws: [],
        bom: {},
        customer: {},
        linkman: { name: "" },
        linkman_id: "",
        salesman: { name: "" },
        employee: { name: "" },
        machine: {},
      },
      search: {},
      rules: {
        process_route_id: [{ required: true, message: "请选工艺线路" }],
      },
      visible: false,
      isSaveing: false,
    };
  },
  mounted() {},
  watch: {
    search: {
      handler() {
        this.$refs.autoBom.triggerSelect();
      },
      deep: true,
    },
    "form.process": {
      handler(value) {
        if (value.name != "" && this.form.raws.length == 0)
          this.form.raws =
            value?.details
              .filter(v => {
                return v.process.hasbom_id == 1;
              })
              .map(v => {
                v.process_name = v.rename;
                v.id = "key" + v.id;
                return v;
              }) ?? [];
      },
      deep: true,
    },
    "form.raws": {
      handler(val) {
        let process_names = [];
        this.boms = val.filter(v => {
          if (v.material?.fullname ?? null)
            process_names.push((v.material.fullname ?? "").replace(/\s+/g, ""));
          if (v.point_stick?.name ?? null)
            process_names.push((v.point_stick.name ?? "").replace(/\s+/g, ""));
          if (v.glue?.fullname ?? null)
            process_names.push((v.glue.fullname ?? "").replace(/\s+/g, ""));
        });
        this.form.bom.name = process_names.join("+");
      },
      deep: true,
    },
  },
  methods: {
    open() {
      this.visible = true;
      return this;
    },
    setData(ids) {
      this.getData(ids);
      return this;
    },
    getopencardParams() {
      return { customer_id: this.form.customer_id };
    },
    opencardSelect(data) {
      this.$API.pro.OpenCard.info.get({ filter: [{ id: data[0].id }] }).then(res => {
        this.form.raws = res.data.raws.map(v => {
          v.id = "row" + v.id;
          return v;
        });
        this.form.bom = res.data.bom ?? {};
        this.form.bom_id = res.data.bom_id;
        this.form.process = res.data.process_route;
        this.form.process_route_id = res.data.process_route_id;
        this.openChooseDlg = false;
      });
    },
    browserOpenCard() {
      this.openChooseDlg = true;
    },
    getProcessBomCategory() {
      let params = { craft_category_id: this.form.craft_category_id };
      if (this.search.pointStick && this.search.pointStick.trim() != "") {
        params["details.point_stick.name"] = {
          value: this.search.pointStick,
          type: "lk",
        };
      }
      if (this.form.backing_category_id) {
        params["details.material.category_id"] = this.form.backing_category_id;
      }
      if (this.form.film_category_id) {
        params["details.material.film_category_id"] = this.form.film_category_id;
      }
      if (this.form.material_comp && this.form.material_comp.trim() != "") {
        params["details.material.comp"] = this.form.material_comp;
      }
      if (this.form.material_comp && this.form.material_comp.trim() != "") {
        params["details.material.comp"] = this.form.material_comp;
      }
      if (this.form.material_batch && this.form.material_batch.trim() != "") {
        params["details.material.batch"] = this.form.material_batch;
      }

      if (this.search.material && this.search.material.trim() != "") {
        params["details.material.fullname"] = {
          value: this.search.material.trim(),
          type: "lk",
        };
      }

      if (this.search.glue && this.search.glue.trim() != "") {
        params["details.glue.fullname"] = { value: this.search.glue.trim(), type: "lk" };
      }
      params["status_id"] = { value: 0, type: "eq" };
      return params;
    },
    getProcessCategory() {
      let params = {
        craft_category_id: this.form.craft_category_id,
      };
      if (this.is_sample == 1) {
        params["name"] = {
          value: "小样",
          type: "lk",
        };
      } else {
        params["name"] = {
          value: "小样",
          type: "nl",
        };
      }
      return params;
    },
    getData(ids) {
      this.$API.market.customerStorage.list
        .get({ filter: [{ id: { type: "in", value: ids } }] })
        .then(res => {
          Object.assign(
            this.form,
            this.$TOOL.removeNull(this.$TOOL.objCopy(res.data.rows[0]))
          );
          this.form.process.name = "";
          this.linkmanGet(this.form.customer_id);
          delete this.form.id;
          this.form.details = res.data.rows.map(v => {
            this.is_sample = v.is_sample;
            v.auxiliary_quantity = (v.auxiliary_quantity * v.lack_quantity) / v.quantity;
            v.quantity = v.lack_quantity;
            v.mpc_detail_id = 0;
            delete v.id;
            delete v.creator_id;
            delete v.auditor_id;
            delete v.updator_id;
            delete v.mpc_detail_id;
            delete v.main_id;

            return v;
          });
        });
    },
    linkmanGet(company_id) {
      this.$API.basedata.businessCompany.linkmanGet
        .get({
          filter: [{ company_id: company_id }],
        })
        .then(v => {
          this.linkmanList = v.data;
        });
    },
    resetForm() {},
    processSelect(data) {
      this.form.process = data;
    },
    bomSelect(data) {
      this.form.raws = (data.details ?? []).map(v => {
        delete v.id;
        return v;
      });
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          this.isSaveing = true;
          var res = await this.$API.pro.OpenCard.save.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          }
        }
      });
    },
    handleSuccess(data) {
      this.linkmanList.push(data);
      this.form.linkman_id = data.id;
    },
  },
};
</script>
